Vue页面手动刷新,实现导航栏激活项还原到初始状态
type: 'enterprise',
},
name: 'app',
{ path: '/mySet/maillist', component: Maillist, name: '通讯录', menuShow: true }
}
leaf: true, // 只有一个节点
//可以无视对ie的支持时
this.bidOrderInit();
},
}
}
</template>
}, 200);
name: 'enterpriseValidate',
component: HomeNav,
name: 'enterprise',
this.$router.push(url); //用go刷新
2.在vue中使用setTimeout
]
<el-menu-item index="/orderManager">订单管理</el-menu-item>
//需要兼容ie时
}
setTimeout(()=> {
最近把手头上一个使用angularJS+jquery各种七七八八组件写的页面拿vue+elementUI重写了一边, 真是极度丝滑, 记录一些vue和elementUI的小问题
break;
}
//于是乎被定时的方法中就使用不到vue的this对象了
children: [
]
leaf: true, // 只有一个节点
component: EnterpriseNav,
//手动刷新视图
changeSef: function () {
menuShow: true,
},
menuShow: true,
defaultActiveIndex: "/"
},
}
component: Home,
{
name: 'enterpriseAdd',
iconCls: 'icon-home', // 图标样式class
<template>{ path: '/enterprise/list', component: EnterpriseList, name: '企业列表', menuShow: true }
this.defaultActiveIndex = url;
}
}
var nav_type = "";
<el-menu :default-active="defaultActiveIndex" mode="horizontal" @select="handleSelect" :router="true">
path: '/enterpriseManager',
this.fetchData()
nav_type = routers[i].type;
'$route': 'fetchData'
for(var k=0; k<grand_children.length; k++){
name: '我的设置',
{ path: '/enterprise/add', component: EnterpriseAdd, name: '企业添加', menuShow: true }
path: '/enterpriseList',
<el-menu-item index="/">工作台</el-menu-item>
menuShow: true,
name: 'home',
menuShow: true,
this.defaultActiveIndex = index;
]
{
for(var j=0; j<children.length; j++){
var grand_children = children[j].children;
},
menuShow: true,
var that = this;
fetchData () {
{ path: '/dashboard', component: Dashboard, name: '首页', menuShow: true }
{
]
<el-menu-item index="/enterpriseManager">企业管理</el-menu-item>
}
component: EnterpriseNav,
component: Home,
iconCls: 'el-icon-menu',
component: HomeNav,
// 组件创建完后获取数据,
},
},
that.$forceUpdate();
data () {
export default {
children: [
children: [
this.defaultActiveIndex = "/";
</script>
}
}
if(children){
name: 'dashboard',
path: '/dashboard',
}
{ path: '/enterprise/validate', component: EnterpriseValidate, name: '企业认证', menuShow: true }
]
children: [
if(nav_type == "home"){
iconCls: 'el-icon-menu',
methods: {
原理:每次刷新都会重新实例化Vue,也就是会调用created方法。
场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容。问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterprise/list),顶部导航激活项还原到初始状态(这里默认是“工作台”项)。
},
var children = routers[i].children;
leaf: true, // 只有一个节点
{
},
menuShow: true,
{
return {
watch: {
handleSelect(index){
setTimeout(bidOrderInit, 200);
//错误示范]
iconCls: 'icon-home', // 图标样式class
children: [
for(var i=0; i<routers.length; i++){
} else if(nav_type == "enterprise"){
1.如果vue中的数据结构比较庞大的话, 十分有可能会出现model更新而视图不更新/model和视图都不更新也不报错的情况, 此时需要手动刷新vue的数据, 在change或click事件中, 使用this.$forceUpdate()手动刷新视图
name: 'enterpriseList',
var cur_path = this.$route.path; //获取当前路由
path: '/enterpriseAdd',
path: '/',
component: EnterpriseNav,
if(grand_children[k].path == cur_path){
}
export default [
setTimeout(function () {
</el-menu>
{ path: '/mySet/plan', component: Plan, name: '行程计划', menuShow: true },
this.defaultActiveIndex = "/enterpriseManager";
]
redirect: '/enterprise/list',
}, 200);
path: '/enterpriseValidate',
type: 'home', //自定义type区分不同模块菜单
created() {
leaf: true, // 只有一个节点
{
补充知识:vue手动刷新视图以及其他小问题
]
path: '/mySet',
iconCls: 'el-icon-menu',
if(grand_children){
var routers = this.$router.options.routes; // 获取路由对象
<script>
附上router配置格式:
jumpTo(url){
//像这样this.bidOrderInit();
{
以上这篇Vue页面手动刷新,实现导航栏激活项还原到初始状态就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
<el-menu-item index="/systemManager">系统管理</el-menu-item>
}
children: [
//上面那样是不行的,网上查了下, 大致是说在setTimeout中this指向window对象,
redirect: '/dashboard',
menuShow: true,
// 此时 data 已经被 observed 了
}
//正确示范
children: [
相关热词:
本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!
本文地址: https://v30.fanwenzhu.com/jz/wp/4849.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
ludou_se_only); } add_action(s
时间:2021-01-23
-
所以经常导致输错密码的
时间:2021-01-23
-
WordPress措施打开速度慢的
时间:2021-01-22
-
WordPress回覆评论自动添加
时间:2021-01-22
-
我们可以通过下面的代码
时间:2021-01-22
-
如何修改WordPress默认脚色
时间:2021-01-20
-
同样的修改文件就行
时间:2021-01-20
-
少数善意的转载者既使没
时间:2021-01-20
热门文章
-
WordPress新手安装教程(图文)
时间:2020-12-28
-
在设置菜单中增加WordPress私密 隐藏的全部
时间:2021-01-10
-
WordPress博客程序常见错误的解决方法
时间:2020-12-28
-
WordPress程序打开速度慢的三种解决方法
时间:2021-01-10
-
wordpress使用代码在每篇文章尾部添加版权
时间:2020-12-14
-
WordPress博客措施常见错误的办理要领
时间:2021-01-15
-
关于WordPress的SEO优化相关的一些PHP页面脚
时间:2021-01-07
-
WordPress措施打开速度慢的三种办理要领
时间:2021-01-22
-
详解WordPress中的头像缓存和署理中的缓存
时间:2021-01-15
-
少数善意的转载者既使没有看到版权信息
时间:2021-01-20
